/**
 * 查看/编辑学籍
 */

<template>
  <div class="check">
    <!-- 基础信息 -->
    <div class="basics">
      <h4>基础信息</h4>
      <div class="basicsContent">
        <div class="basicsContentLeft"></div>
        <el-form
          :inline="true"
          :model="basicsForm"
          :disabled="true"
          class="demo-form-inline"
          ref="basicsForm"
          label-width="100px"
          v-loading.lock="isLoading"
        >
          <div class="demo-form-inline1">
            <el-form-item label="姓名：" prop="studentName">
              <el-input
                v-model="basicsForm.studentName"
                placeholder="姓名"
                class="input-wrap"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别：" prop="gender">
              <el-select
                v-model="basicsForm.gender"
                placeholder="性别"
                class="select-wrap"
              >
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族：" prop="nation">
              <el-select
                class="select-wrap"
                v-model="basicsForm.nation"
                placeholder="民族"
                filterable
              >
                <el-option
                  :label="item.typeName"
                  :value="item.typeName"
                  v-for="(item, index) in nationList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件类型：" prop="identificationType">
              <el-select
                class="select-wrap"
                v-model="basicsForm.identificationType"
                placeholder="证件类型"
              >
                <el-option
                  :label="item.typeName"
                  :value="item.typeId + ''"
                  v-for="(item, index) in certificateList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码：" prop="idCardNo">
              <el-input
                v-model="basicsForm.idCardNo"
                placeholder="证件号码"
                class="input-wrap"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生年月：" prop="birthday" class="no_label">
              <div class="block">
                <el-date-picker
                  v-model="basicsForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  class="date-wrap"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <!-- </div> -->

            <!-- <div class="fatherAndMother"> -->
            <el-form-item label="父亲：" prop="studentFather">
              <el-input
                v-model="basicsForm.studentFather"
                placeholder="父亲"
                class="input-wrap"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式：" prop="studentFatherPhone">
              <el-input
                v-model="basicsForm.studentFatherPhone"
                placeholder="联系方式"
                class="input-wrap"
              ></el-input>
            </el-form-item>

            <el-form-item label="母亲：" prop="studentMother">
              <el-input
                v-model="basicsForm.studentMother"
                placeholder="母亲"
                class="input-wrap"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系方式：" prop="studentMotherPhone">
              <el-input
                v-model="basicsForm.studentMotherPhone"
                placeholder="联系方式"
                class="input-wrap"
              ></el-input>
            </el-form-item>
          </div>

          <div class="area">
            <el-form-item
              label="籍贯："
              class="nativePlace"
              prop="nativeProvince"
            >
              <el-select
                class="select-wrap"
                v-model="basicsForm.nativeProvince"
                placeholder="请选择省"
                @change="getCity"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in provinceList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="nativePlace" prop="nativeCity">
              <el-select
                class="select-wrap"
                v-model="basicsForm.nativeCity"
                placeholder="请选择市"
                @change="getArea"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in cityList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="nativePlace" prop="addressCounty">
              <el-select
                class="select-wrap"
                v-model="basicsForm.addressCounty"
                placeholder="请选择区"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in areaList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="communicateBox">
            <el-form-item
              label="通讯地址："
              class="communicate"
              prop="addressProvince"
            >
              <el-select
                class="select-wrap"
                v-model="basicsForm.addressProvince"
                placeholder="请选择省"
                @change="getAddressCity"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in addrProvinceList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="communicate" prop="addressCity">
              <el-select
                class="select-wrap"
                v-model="basicsForm.addressCity"
                placeholder="请选择市"
                @change="getAddressCounty"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in addrCityList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="communicate" prop="nativeCounty">
              <el-select
                class="select-wrap"
                v-model="basicsForm.nativeCounty"
                placeholder="请选择区"
              >
                <el-option
                  :label="item.areaName"
                  :value="item.areaCode"
                  v-for="(item, index) in addrAreaList"
                  :key="index"
                >
                  {{ item.areaName }}
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="communicate address-form" prop="postalAddress">
              <el-input
                v-model="basicsForm.postalAddress"
                placeholder="请输入详细地址"
                class="address-detail-input"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>

        <!-- 上传头像 -->
        <div class="basicsContentRight">
          <div class="avatarBox">
            <img
              class="avatar"
              :src="basicsForm.avatar"
              alt=""
              v-if="basicsForm.avatar"
            />
            <div class="avatarTitle" v-else>
              <span>{{
                basicsForm.studentName &&
                basicsForm.studentName.substring(
                  basicsForm.studentName.length - 2,
                  basicsForm.studentName.length
                )
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习信息 -->
    <div class="study">
      <h4>学习信息</h4>
      <div class="studyContent">
        <el-form
          :inline="true"
          :model="studyForm"
          ref="studyForm"
          :rules="!isLookInfo ? studyRules : {}"
          :disabled="isLookInfo"
          class="demo-form-inline"
          label-width="100px"
          v-loading.lock="isLoading"
        >
          <div>
            <el-form-item label="学院：" prop="colleageCode">
              <el-select
                class="select-wrap"
                v-model="studyForm.colleageCode"
                placeholder="学院"
                clearable
                @clear="infoHandleClear"
                ref="infoSelectUpResId"
              >
                <!-- // 设置一个隐藏的下拉选项
              // 如果不设置一个下拉选项，下面的树形组件将无法正常使用 -->
                <el-option
                  hidden
                  :value="studyForm.colleageCode"
                  :label="colleageName"
                >
                </el-option>
                <!-- // 设置树形组件
                是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
                // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。
                  // 节点被点击时的回调 -->
                <el-tree
                  :data="editSeletOptions"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="infoHandleNodeClick"
                >
                </el-tree>
              </el-select>
            </el-form-item>

            <el-form-item label="专业：" prop="majorId">
              <el-select
                class="select-wrap"
                v-model="studyForm.majorId"
                placeholder="专业"
                @change="getClassList"
              >
                <el-option
                  v-for="(item, index) in majorList"
                  :key="index"
                  :label="item.majorName"
                  :value="item.majorId + ''"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级：" prop="clbum" class="no_label">
              <el-select
                class="select-wrap"
                v-model="studyForm.classId"
                placeholder="班级"
              >
                <el-option
                  v-for="item in classListData"
                  :key="item.classId"
                  :label="item.className"
                  :value="item.classId"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学习状态：" class="no_label">
              <el-select
                class="select-wrap"
                v-model="studyForm.learningState"
                placeholder="状态"
              >
                <el-option
                  :label="item.typeName"
                  :value="item.typeName"
                  v-for="(item, index) in stateList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="学号：" prop="studentIds" class="no_label">
              <el-input
                v-model="studyForm.studentIds"
                placeholder="请输入学号"
                class="input-wrap"
              ></el-input>
            </el-form-item>

            <el-form-item label="辅导员：" prop="counselor" class="no_label">
              <el-select
                class="select-wrap"
                v-model="studyForm.counselor"
                placeholder="辅导员"
              >
                <el-option
                  v-for="item in teacherList"
                  :key="item.id"
                  :label="item.teacherName"
                  :value="item.teacherName"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="来源：" prop="studentSourse" class="no_label">
              <el-select
                class="select-wrap"
                v-model="studyForm.studentSourse"
                placeholder="来源"
              >
                <el-option
                  :label="item.typeName"
                  :value="item.typeName"
                  v-for="(item, index) in studentSourseList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 学习进度 -->
    <div class="schedule">
      <h4>学习进度</h4>
      <div class="scheduleContent">
        <ul class="scheduleContentUl" v-if="scheduleList.length > 0">
          <li class="ulHeader">
            <span>学年学期</span>
            <span>学习完成度</span>
          </li>
          <li v-for="(item, index) in scheduleList" :key="index" class="ulBody">
            <span>
              {{ item.schoolYearName }} ~ {{ item.schoolSemesterName }}
            </span>
            <span :class="item.studyStatus == '1' ? 'liBlue' : 'liGreen'">
              <i></i>
              {{
                item.studyStatus == "1"
                  ? "未开始"
                  : item.studyStatus == "1"
                  ? "学习中"
                  : "已完成"
              }}
            </span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 前置学历 -->
    <div class="preposition">
      <h4>前置学历</h4>
      <div class="prepositionContent">
        <el-table
          ref="multipleTable"
          :data="prepositionList"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column></el-table-column>
          <el-table-column label="学校名称" prop="name"></el-table-column>
          <el-table-column label="在校时间" prop="date"></el-table-column>
          <el-table-column label="学历" prop="educationBg"></el-table-column>
          <el-table-column label="学习形式" prop="modality"></el-table-column>
          <el-table-column></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="footerButton">
      <button class="close" @click="close">取消</button>
      <button class="confirm" @click="submitForm" v-if="!isLookInfo">
        确定
      </button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {
  getAreaListApi,
  getCityListApi,
  getProvinceListApi,
} from "@/api/educational/area";

import {
  getMajorListApi,
  getStudentStatusDetailApi,
  updateStudentStatusDetailApi,
} from "@/api/educational/studentStatus";

import {
  colleageTreeDataApi,
  getClassGradeListApi,
} from "@/api/basics/teachingPlan";

import { getTeacherListDataApi } from "@/api/educational/teacherManagement";
import { getClassifyListApi } from "@/api/basics/classify";
import { _debounce } from "@/utils/debounce";
export default {
  data() {
    return {
      id: "",
      isLookInfo: false,
      imageUrl: "",
      isLoading: false,
      provinceList: [], // 省 列表
      cityList: [], // 市 列表
      areaList: [], // 区 列表
      addrProvinceList: [], // 通讯 省 列表
      addrCityList: [], // 通讯 市 列表
      addrAreaList: [], // 通讯 区 列表
      studentStatusDetail: {}, // 详情数据
      majorList: [], // 专业列表
      classListData: [], // 班级列表
      teacherList: [], // 辅导员列表
      nationList: [], // 民族列表
      certificateList: [], // 证件类型列表
      studentSourseList: [], // 来源列表
      stateList: [], // 学习状态列表
      colleageName: "",
      editSeletOptions: [],
      pageSize: 10,
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 基础信息
      basicsForm: {
        avatar: "",
        studentName: "", // 姓名
        gender: "", // 性别
        nation: "", // 民族
        identificationType: "", // 证件类型
        idCardNo: "", // 证件号码
        birthday: "", // 出生年月
        studentFather: "", // 父亲
        studentFatherPhone: "", // 父亲联系方式
        studentMother: "", // 母亲
        studentMotherPhone: "", // 母亲联系方式
        nativeProvince: "", // 籍贯 省
        nativeCity: "", // 籍贯 市
        nativeCounty: "", // 籍贯 区
        addressProvince: "", // 通讯地址 省
        addressCity: "", // 通讯地址 市
        addressCounty: "", // 通讯地址 区
        postalAddress: "", // 详细地址
      },
      // 学习信息
      studyForm: {
        colleageCode: "", // 学院
        majorId: "", // 专业
        majorName: "", // 专业名称
        classId: "", // 班级
        studentIds: "", // 学号
        counselor: "", // 辅导员
        studentSourse: "", // 来源
        learningState: "", // 学习状态
      },
      // 学习进度
      scheduleList: [],
      // 前置学历
      prepositionList: [
        {
          name: "学校名称",
          date: "2018-09-01 ~ 2022-06-06",
          educationBg: "本科",
          modality: "全日制",
        },
        {
          name: "学校名称",
          date: "2018-09-01 ~ 2022-06-06",
          educationBg: "本科",
          modality: "全日制",
        },
        {
          name: "学校名称",
          date: "2018-09-01 ~ 2022-06-06",
          educationBg: "本科",
          modality: "全日制",
        },
        {
          name: "学校名称",
          date: "2018-09-01 ~ 2022-06-06",
          educationBg: "本科",
          modality: "全日制",
        },
      ],

      // // 基础信息表单验证
      // basicsRules: {
      //   // 姓名
      //   studentName: [
      //     { required: true, message: "请输入姓名", trigger: "change" },
      //     {
      //       min: 2,
      //       max: 6,
      //       message: "长度在 3 到 5 个字符",
      //       trigger: "change",
      //     },
      //   ],
      //   // 性别
      //   gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      //   // 民族
      //   nation: [{ required: true, message: "请选择民族", trigger: "change" }],
      //   // 证件类型
      //   identificationType: [
      //     { required: true, message: "请选择证件类型", trigger: "change" },
      //   ],
      //   // 证件号码
      //   idCardNo: [
      //     { required: true, message: "请输入证件号码", trigger: "change" },
      //     {
      //       min: 18,
      //       max: 18,
      //       message: "长度在18个字符",
      //       trigger: "change",
      //     },
      //   ],
      //   // 父亲
      //   studentFather: [
      //     { required: true, message: "请输入父亲姓名", trigger: "change" },
      //   ],
      //   // 父亲联系方式
      //   studentFatherPhone: [
      //     { required: true, message: "请输入父亲联系方式", trigger: "change" },
      //     {
      //       validator: function (rule, value, callback) {
      //         if (/^1[3-9]\d{9}$/.test(value) == false) {
      //           callback(new Error("请输入正确的手机号"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "change",
      //     },
      //   ],
      //   // 母亲
      //   studentMother: [
      //     { required: true, message: "请输入母亲姓名", trigger: "change" },
      //   ],
      //   // 母亲联系方式
      //   studentMotherPhone: [
      //     { required: true, message: "请输入母亲联系方式", trigger: "change" },
      //     {
      //       validator: function (rule, value, callback) {
      //         if (/^1[3-9]\d{9}$/.test(value) == false) {
      //           callback(new Error("请输入正确的手机号"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "change",
      //     },
      //   ],
      //   // 籍贯 省
      //   nativeProvince: [
      //     { required: true, message: "请选择省", trigger: "change" },
      //   ],
      //   // 籍贯 市
      //   nativeCity: [
      //     { required: true, message: "请选择市", trigger: "change" },
      //   ],
      //   // 籍贯 区
      //   nativeCounty: [
      //     { required: true, message: "请选择区（县）", trigger: "change" },
      //   ],
      //   // 通讯地址 省
      //   addressProvince: [
      //     { required: true, message: "请选择省", trigger: "change" },
      //   ],
      //   // 通讯地址 市
      //   addressCity: [
      //     { required: true, message: "请选择市", trigger: "change" },
      //   ],
      //   // 通讯地址 区
      //   addressCounty: [
      //     { required: true, message: "请选择区（县）", trigger: "change" },
      //   ],
      //   // 详细地址
      //   postalAddress: [
      //     { required: true, message: "请输入详细地址", trigger: "change" },
      //   ],
      // },

      // 学习信息表单验证
      studyRules: {
        // 学院
        colleageCode: [
          { required: true, message: "请选择学院", trigger: "change" },
        ],
        // 专业
        majorId: [{ required: true, message: "请选择专业", trigger: "change" }],
      },
    };
  },

  mounted() {
    let { title } = this.$route.query;
    if (title == "edit") {
      this.isLookInfo = false;
    } else {
      this.isLookInfo = true;
    }
    this.isLoading = true;
    // 根据id获取详情数据;
    let { id } = this.$route.query;
    if (id) {
      this.id = id;
      getStudentStatusDetailApi({ id }).then(async (res) => {
        let result = res.data;
        // 学习信息
        this.studyForm = {
          colleageCode: result.colleageCode, // 学院
          majorId: result.majorId, // 专业
          majorName: result.majorName,
          classId: result.classId, // 班级
          studentIds: result.studentIds, // 学号
          counselor: result.counselor, // 辅导员
          studentSourse: result.studentSourse, // 来源
          learningState: result.learningState,
        };
        this.colleageName = result.colleageName;
        this.scheduleList = result.studentExperienceVoList;
        this.basicsForm = result;

        // 获取省
        getProvinceListApi().then((res) => {
          this.provinceList = res.data; // 籍贯 省 列表
          this.addrProvinceList = res.data; // 通讯 省 列表

          // 获取 籍贯 市
          getCityListApi(this.basicsForm.nativeProvince).then((res) => {
            this.cityList = res.data;
            // 获取 籍贯 区
            getAreaListApi(this.basicsForm.nativeCity).then((res) => {
              this.areaList = res.data;
            });
          });

          // 获取 通讯 市
          getCityListApi(this.basicsForm.addressProvince).then((res) => {
            this.addrCityList = res.data;
            // 获取 通讯 区
            getAreaListApi(this.basicsForm.addressCity).then((res) => {
              this.addrAreaList = res.data;
            });
          });
        });

        setTimeout(() => {
          this.isLoading = false;
        }, 2000);
      });
    }

    // 获取学院列表
    this.editSelectTreeData();

    // 获取专业列表
    this.getMajorList();

    // 获取班级列表
    this.getClassGradeList();

    // 获取教师列表
    this.getTeacherListData();

    // 获取民族列表
    this.getNationList({
      pageNum: this.currentPage,
      pageSize: 56,
      parentId: 69,
    });

    // 获取证件类型列表
    this.getCertificateList({
      parentId: 139,
    });

    // 获取来源列表
    this.getStudentSourseList({
      parentId: 70,
    });

    // 获取学习状态列表
    this.getStateList({
      parentId: 222,
    });
  },

  deactivated() {
    this.$refs["basicsForm"].resetFields();
    this.$refs["studyForm"].resetFields();
  },

  methods: {
    // 获取民族列表
    async getNationList(data) {
      let res = await getClassifyListApi(data);
      this.nationList = res.rows;
    },

    // 获取证件类型列表
    async getCertificateList(data) {
      let res = await getClassifyListApi(data);
      this.certificateList = res.rows;
    },

    // 获取来源列表
    async getStudentSourseList(data) {
      let res = await getClassifyListApi(data);
      this.studentSourseList = res.rows;
    },

    // 获取学习状态列表
    async getStateList(data) {
      let res = await getClassifyListApi(data);
      this.stateList = res.rows;
    },

    // 获取所属专业列表
    async getMajorList(id) {
      if (id) {
        let res = await getMajorListApi({ colleageId: id });
        if (res.code === 200) {
          this.majorList = res.data.filter((item) => {
            return item.status == "0";
          });
        }
      } else {
        // let res = await getMajorListApi();
        // if (res.code === 200) {
        //   this.majorList = res.data.filter((item) => {
        //     return item.status == "0";
        //   });
        // }
      }
    },

    // 获取学院下拉框
    async editSelectTreeData() {
      const res = await colleageTreeDataApi();
      if (res.code === 200) {
        this.editSeletOptions = res.data;
      }
    },

    // 获取班级列表
    async getClassGradeList(id) {
      if (id) {
        await getClassGradeListApi({ majorId: id }).then((res) => {
          this.classListData = res.rows;
        });
      } else {
        // await getClassGradeListApi({ pageSize: 20 }).then((res) => {
        //   this.classListData = res.rows;
        // });
      }
    },

    // 获取教师列表
    async getTeacherListData() {
      const res = await getTeacherListDataApi();
      this.teacherList = res.rows;
    },

    // 选择专业 请求班级列表
    getClassList(val) {
      this.getClassGradeList(val);
    },

    // 获取籍贯市列表
    getCity(val) {
      // 获取市
      getCityListApi(val).then((res) => {
        this.basicsForm.nativeCity = res.data[0].areaCode;
        this.cityList = res.data;
        // 获取区
        getAreaListApi(res.data[0].areaCode).then((res) => {
          this.basicsForm.nativeCounty = res.data[0].areaCode;
          this.areaList = res.data;
        });
      });
    },

    // 获取籍贯区列表
    getArea(val) {
      // 获取区
      getAreaListApi(val).then((res) => {
        this.basicsForm.nativeCounty = res.data[0].areaCode;
        this.areaList = res.data;
      });
    },

    // 获取通讯地址市列表
    getAddressCity(val) {
      // 获取市
      getCityListApi(val).then((res) => {
        this.basicsForm.addressCity = res.data[0].areaCode;
        this.addrCityList = res.data;
        // 获取区
        getAreaListApi(this.basicsForm.addressCity).then((res) => {
          this.basicsForm.addressCounty = res.data[0].areaCode;
          this.addrAreaList = res.data;
        });
      });
    },

    // 获取通讯地址区列表
    getAddressCounty(val) {
      // 获取区
      getAreaListApi(val).then((res) => {
        this.basicsForm.addressCounty = res.data[0].areaCode;
        this.addrAreaList = res.data;
      });
    },

    // 将选择器的值置空
    infoHandleClear() {
      this.colleageName = "";
      this.studyForm.colleageCode = "";
    },

    // 弹框下拉树
    infoHandleNodeClick(data) {
      // // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.colleageName = data.label;
      this.studyForm.colleageCode = data.id;
      this.getMajorList(data.id);
      // // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
      this.$refs.infoSelectUpResId.blur();
    },

    // 确定按钮
    submitForm: _debounce(function () {
      // 基础信息表单验证
      this.$refs.basicsForm.validate((basicsFormFlag) => {
        if (basicsFormFlag) {
          // 学习信息表单验证
          this.$refs.studyForm.validate((studyFormFlag) => {
            if (studyFormFlag) {
              let birthday = moment(this.basicsForm.birthday).format(
                "YYYY-MM-DD"
              );
              let data = {
                ...this.basicsForm,
                ...this.studyForm,
                id: this.id,
                birthday,
                colleageName: this.colleageName,
              };
              this.$message("修改中，请等候~");
              updateStudentStatusDetailApi(data).then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改成功！");
                  this.$router.push({
                    path: "/educational/studentStatus",
                  });
                } else {
                  this.$message.error("修改失败！");
                }
              });
            }
          });
        }
      });
    }, 500),

    // 取消
    close() {
      this.$router.push({
        path: "/educational/studentStatus",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .address-form .el-form-item__content {
  width: 100%;
}

::v-deep .el-form--inline .el-form-item__label {
  width: 100px;
}

::v-deep .el-form-item:not(.is-no-asterisk) > .el-form-item__label:before {
  font-size: 20px;
  color: #f56c6c;
  margin: 9px 4px 0 0;
}

::v-deep .el-form-item__error {
  padding: 0;
}

.check {
  width: 100%;
  height: 100%;
  padding: 0 15px 15px;
  overflow: auto;

  .basics,
  .study,
  .schedule,
  .preposition {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 25px 0 30px 40px;
    margin: 0 0 10px 0;
    border-radius: 8px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

    h4 {
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: #4498e0;
      font-size: 18px;
      border-left: solid 4px #4498e0;
    }
  }

  // 基础信息
  .basics {
    .basicsContent {
      position: relative;
      display: flex;
      margin-top: 20px;

      .demo-form-inline1 {
        display: flex;
        flex-wrap: wrap;
        ::v-deep .el-form-item__label {
          line-height: 40px;
          display: inline-flex;
          padding: 0;
          align-items: center;
          justify-content: right;
        }
      }

      .el-form-item {
        margin: 0 10px 10px 0;
      }

      .communicate,
      .nativePlace {
        ::v-deep .el-form-item__label {
          line-height: 40px;
          display: inline-flex;
          padding: 0;
          align-items: center;
          justify-content: right;
        }
      }

      .input-wrap {
        width: 210px;
      }

      .select-wrap,
      .date-wrap {
        width: 210px;
      }

      .demo-form-inline1 .el-form-item,
      .fatherAndMother .el-form-item {
        display: block;
        width: 26%;
      }

      // 详细地址
      .address-form {
        min-width: 25%;
      }

      // 上传头像
      .basicsContentRight {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        padding-right: 30px;
        flex-direction: column;
        align-items: center;

        .avatarBox {
          width: 160px;
          height: 170px;
          border-radius: 5px;
          background-color: #f0f0f0;
          border: solid 1px #f0f0f0;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          .avatar {
            width: 100%;
            height: 100;
            border-radius: 5px;
          }

          .avatarTitle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #409eff;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
              color: #fff;
              font-size: 24px;
            }
          }

          .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }

          .avatar {
            width: 100%;
            height: 100%;
            display: block;
          }
          .icon {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;

            .avatar-uploader-icon {
              font-size: 40px;
              color: #c4c4c4;
            }

            span {
              font-size: 16px;
              margin: 10px 0 0 0;
              color: #9d9d9d;
            }
          }
        }

        .avatar-tip {
          color: #cacaca;
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }

  // 学习信息
  .study {
    ::v-deep .el-form-item__label {
      line-height: 30px;
      display: inline-flex;
      padding: 0;
      align-items: center;
      justify-content: right;
    }

    .no_label {
      ::v-deep .el-form-item__label {
        line-height: 40px;
        display: inline-flex;
        padding: 0;
        align-items: center;
        justify-content: right;
      }
    }
    .studyContent {
      margin-top: 10px;
    }

    .input-wrap {
      width: 210px;
    }

    .select-wrap,
    .date-wrap {
      width: 210px;
    }
  }

  // 学习进度
  .schedule {
    .scheduleContent {
      width: 100%;
      padding: 0 60px 0 10px;
      box-sizing: border-box;

      .scheduleContentUl {
        width: 100%;
        li {
          width: 100%;
          height: 58px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          border-bottom: solid 1px #eaeaea;
          span {
            width: 150px;
            font-size: 14px;
            text-align: center;
          }
        }

        .ulHeader {
          span {
            font-size: 18px;
          }
        }

        .ulBody {
          span {
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
          .liBlue {
            color: #468fd3;
            i {
              background-color: #468fd3;
            }
          }
          .liGreen {
            color: #5ee183;
            i {
              background-color: #5ee183;
            }
          }
        }
      }
    }
  }

  // 前置学历
  .preposition {
    padding: 25px 0 30px;

    h4 {
      margin-left: 40px;
    }

    .prepositionContent {
      width: 100%;
      margin-top: 20px;
    }
  }

  // 按钮
  .footerButton {
    padding: 30px 0;
    display: flex;
    justify-content: center;

    button {
      width: 105px;
      height: 32px;
      color: #4895db;
      border: solid 1px #4895db;
      border-radius: 20px;
      background-color: #fff;
    }

    .confirm {
      color: #fff;
      background-color: #4895db;
      margin-left: 40px;
    }
  }
}
</style>